<%--
  Created by IntelliJ IDEA.
  User: 61741
  Date: 2017/12/4
  Time: 21:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>商家黄页</title>
    <meta charset="utf-8">
    <jsp:include page="../common/portal-head.jsp"></jsp:include>
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/seller.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/checkbox.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/page.css">
</head>
<body>
<div class="page-container">
    <jsp:include page="../portal/topmenu.jsp"></jsp:include>
    <jsp:include page="../portal/slider.jsp"></jsp:include>
    <div class="content-wrap">
        <div class="top-seller-wrap">
            <h1 class="seller-title">明星企业</h1>
            <div class="next-list-but">
                <div class="title-bot-line">
                </div>
                <img src="${ctx}/resources/portal/img/next.png" onclick="goNextPage()">
                <img src="${ctx}/resources/portal/img/pre.png" onclick="goNextPage()">

            </div>
            <div class="companyList-outline">
                <div class="top-seller-list" id="starCompany">

                </div>
            </div>
        </div>
   <c:choose>
    <c:when test="${pageType=='agency'}">
        <div class="exhibition-info">
            <div class="top-title">
                <span class="title-span"><img src="${ctx}/resources/portal/img/shop_info.png">订购会、展销会消息</span>
                <span class="more-info">更多>></span>
            </div>
            <hr>
            <div class="info-list">
                <ul id="salepartyinfo-left">W
                </ul>
            </div>
        </div>
    </c:when>
   </c:choose>
        <div class="search-wrap">
            <div class="search-box-wrap">
                <div class="search-options">
                    <div class="search-options-item">
                        <span>生产类型 :</span>
                        <div class="check-lable"><input type="checkbox" name="seller" id="self-seller"
                                                        onclick="changecheck(this)">
                            <img class="checked-logo" src="${ctx}/resources/portal/img/checked.png">
                        </div>
                        <label>自产</label>
                        <div class="check-lable"><input type="checkbox" name="seller" id="other-seller"
                                                        onclick="changecheck(this)">
                            <img class="checked-logo" src="${ctx}/resources/portal/img/checked.png">
                        </div>
                        <label>其他货源</label>
                    </div>
                    <div class="search-options-item">
                        <span>价格范围 :</span>
                        <input type="text" class="search-price">
                        <span class="between-price">—</span>
                        <input type="text" class="search-price">
                    </div>
                    <div class="search-options-item">
                        <span class="branch-title">推荐品牌 :</span>
                        <ul class="brand-list" id="adviceShop">
                        </ul>
                    </div>
                </div>
                <div class="search-box">
                    <div class="search-box-input">
                        <%--<select>--%>
                        <%--<option>深圳</option>--%>
                        <%--</select>--%>
                        <input type="text" id="keyword" name="keyword" placeholder="请输入关键词搜索商家"/>
                        <button class="serach-button" onclick="searchSub('keyword','keyword',1)">搜索</button>
                    </div>
                    <div class="brach-advise">
                        <span>热门搜索</span>
                        <div id="hotSearchshop">
                        </div>
                    </div>
                </div>
            </div>
            <div class="search-fillter-wrap">
                <div class="seller-filiter">
                    <label class="city-lable" id="fliiterCity" onclick="showAreaDialog(this)">默认全国</label>
                    <%--<select name="city" id="city" class="chosen-select" onchange="searchSub('cityId','city',1)">--%>
                    <%--<option value="default">默认全国</option>--%>
                    <%--<c:forEach items="${provinces}" var="province">--%>
                    <%--<option value="${province.addressId}">${province.name}</option>--%>
                    <%--</c:forEach>--%>
                    <%--</select>--%>
                </div>
                <div class="sale-num" onclick="searchSub('saleCount','',1)">
                    <span>店铺销量<i class="fa fa-sort-amount-desc"></i></span>
                </div>
            </div>
        </div>
        <div class="seller-list-wrap" id="companyList">

        </div>
        <div id="page" class="page_div"></div>
    </div>
</div>
<jsp:include page="../portal/footer.jsp"></jsp:include>
<div class="modal fade" id="areaSlectBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">选择城市</h4>
            </div>
            <div class="modal-body">
                <div class="areaSelect" id="areaDialog">
                    <c:forEach items="${provinces}" var="province" varStatus="status">
                        <a href="javascript:getCity(${province.addressId})" code="${province.addressId}">
                                ${province.name}
                        </a>
                        <c:if test="${status.index != 0}">
                            <c:if test="${(status.index+1) % 3 == 0}">
                                <div class="city-select"></div>
                            </c:if>
                            <c:if test="${status.index ==provinces.size()-1}">
                                <div class="city-select"></div>
                            </c:if>
                        </c:if>
                    </c:forEach>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script src="${ctx}/resources/portal/script/page.js" type="text/javascript"></script>
<script id="slider-tml" type="text/html">
    <li><img src="\${url}"></li>
</script>

<script id="starCompany-tml" type="text/html">
    <div class="top-seller-item" onclick="javascript:window.location.href='${ctx}/shop/index/\${_id}'">
        <img class="seller-pic" src="\${userLogo}">
        <div class="seller-dsc">
            <div class="seller-dsc-inline">
                <span class="seller-dsc-name">\${companyName}</span>
                <span class="seller-dsc-content">本周优秀企业点击查看详情>></span>
            </div>
        </div>
    </div>
</script>
<script id="adviceShop-tml" type="text/html">
    <li><a href="javascript:window.location.href='${ctx}/shop/index/\${_id}'">\${stName}</a></li>
</script>
<script id="hotSearchshop-tml" type="text/html">
    <a href="javascript:window.location.href='${ctx}/shop/index/\${_id}'">\${stName}</a>
</script>
<script id="companyList-tml" type="text/html">
    <div class="seller-list-item" >
        <img src="\${userLogo}" class="seller-list-pic" onclick="javascript:window.location.href='${ctx}/shop/index/\${id}'">
        <div class="seller-detail-info">
            <h1>\${companyName}</h1>
            <p>\${userDsc}</p>
            <div class="seller-add-phone">
                <img src="${ctx}/resources/portal/img/address.png">
                <span>企业地址:\${userAddressName.provineName}\${userAddressName.cityName}\${userAddressName.twonName}\${userAdd.detailAddress}</span>
                <img src="${ctx}/resources/portal/img/phone.png">
                <span>联系方式:\${userContact} </span>
            </div>
        </div>
        <img src="${ctx}/resources/portal/img/before_collect.png" class="collection-before" id="collect-pic-1" alt="0"
             onclick="collect('collect-pic-1','\${id}')">
    </div>
</script>
<script id="saleinfo-tml" type="text/html">
    <li><a href="javascript:window.location.href='${ctx}/articledetail/index/\${id}'">\${main_title}</a><span>\${formatDate(create_time)}</span></li>
</script>
<script type="text/javascript">
    var page = '${pageType}';
    var scope='';
    var userType=2;
    var serachClik = true;//判断城市选择是顶部还是搜索过滤
    var city = "default";
    $(function () {
        if(page=="agency"){
            scope="AGENCY";
            userType=3;
            loadflagShop("AGENCY", city, "starCompany");
            loadflagShop("AGENCY_ADVICE", city, "adviceShop");
            loadflagShop("AGENCY_HOTSERACH", city, "hotSearchshop");
            loadInfoList(scope);
        }else if(page=="parts"){
            scope="PARTS";
            userType=4;
            loadflagShop("PARTS", city, "starCompany");
            loadflagShop("PARTS_ADVICE", city, "adviceShop");
            loadflagShop("PARTS_HOTSERACH", city, "hotSearchshop");
        }
        else{
            scope="SELLER";
            userType=2;
            loadflagShop("SELLER", city, "starCompany");
            loadflagShop("SELLER_ADVICE", city, "adviceShop");
            loadflagShop("SELLER_HOTSERACH", city, "hotSearchshop");

        }

//        $("#city").chosen({width: 380})
        loadSlider(city);

        loadallshop();
    })
    function loadSlider(city) {
        var data = {city: city};
        asyncAjax({
            url: ctx + "/home/slider/list/" + scope + "?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            success: function (res) {
                if (res["result"] == "0") {
                    if (!isEmpty(res["data"])) {
                        $("#slider-ul").html("");
                        $("#slider-tml").tmpl(res["data"]).appendTo($("#slider-ul"));
                        // 修正轮播图插件图片宽度自适应问题

                        $(".slider-img").attr("style", "width:" + $(".slider-img-ul li").length * 100 + "% !important;");
                        $(".slider-img-ul>li>img").css({
                            width: $(".slider-wrap").width() + "px !important",
                            height: "auto !important"
                        });
                        $(".slider").xSlider({w: 1340});
                    }
                    else {
                        $("#newGood-table").html('<li><img src="${ctx}/resources/portal/img/banner/1-banner.jpg"></li>');
                    }
                }
                else {
                    bootbox.alert(res["msg"]);
                }
            }

        })
    }
    function loadflagShop(type, city, target) {
        var data = {pageType: type, city: city};
        asyncAjax({
            url: ctx + "/portal/shop/flag/list?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function (req) {
                $("#" + target).html('<i class="fa fa-spin fa-spinner"></i>正在刷新数据...');
            },
            success: function (res) {
                //console.log("res:%o", res);
                if (res["result"] == "0") {
                    $("#" + target).html("");
                    if (!isEmpty(res["data"])) {
                        $("#" + target + "-tml").tmpl(res["data"]).appendTo($("#" + target));

                    } else {
                        $("#" + target).html("<div class='alert alert-warning'>该模块尚未配置推广商铺</div>");
                    }
                } else {
                    bootbox.alert(res["msg"]);


                }
            }
        })
    }
    function loadallshop(pageNum) {
        var data = {reviewStatus: 2, pageNum: pageNum || 1, pageSize: 10};
        asyncAjax({
            url: ctx + "/user/mgr/list/"+userType+"?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function (req) {
                $("#companyList").html('<i class="fa fa-spin fa-spinner"></i>正在刷新数据...');
            },
            success: function (res) {
                if (res["result"] == "0") {
                    $("#companyList").html("");
                    if (!isEmpty(res["data"])) {
                        $("#companyList-tml").tmpl(res["data"]).appendTo($("#companyList"));

                        $("#page").paging({
                            pageNo: pageNum || 1,
                            totalPage: Math.ceil(res.total / 10),
                            totalSize: res.total,
                            callback: function (num) {
                                loadallshop(num);
                            }
                        })

                    } else {
                        $("#companyList").html("<div class='alert alert-warning'>该模块尚未配置推广商铺</div>");
                    }
                } else {
                    bootbox.alert(res["msg"]);
                }
            }
        })

    }
    function searchSub(name, el, pageNum) {
        var data = {userType:userType};
        if (name == "keyword") {
            data = {keyword: $("#" + el).val(), userType: userType, pageNum: pageNum || 1, pageSize: 10};
        }
        if (name == "cityId") {
            data = {cityId: $("." + el).attr('value'), userType: userType, pageNum: pageNum || 1, pageSize: 10};
        }
        if (name == "saleCount") {
            data = {sort: name, userType: userType, pageNum: pageNum || 1, pageSize: 10};
            $(".fa-sort-amount-desc").css({
                color: "#F34B91"
            })
        }
        asyncAjax({
            url: ctx + "/user/mgr/getUserList?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            success: function (res) {
                if (res["result"] == "0") {
                    $("#companyList").html("");
                    if (!isEmpty(res["data"])) {
                        $("#companyList-tml").tmpl(res["data"]).appendTo($("#companyList"));

                        $("#page").paging({
                            pageNo: pageNum || 1,
                            totalPage: Math.ceil(res.total / 10),
                            totalSize: res.total,
                            callback: function (num) {
                                searchSub(name, el, num);
                            }
                        })

                    } else {
                        $("#companyList").html("<div class='alert alert-warning'>未搜到相关商家</div>");
                    }
                } else {
                    bootbox.alert(res["msg"]);
                }
            }
        })

    }
    function getCity(provinceId) {
        $(".areaSelect a.active,.areaSelect .city-select.active").removeClass("active");
        $(".areaSelect a[code=\"" + provinceId + "\"]").addClass("active");
        var targetDiv = $(".areaSelect a[code=\"" + provinceId + "\"]").nextAll(".city-select")[0];
        $(targetDiv).addClass("active");

        var data = {provinceId: provinceId}
        asyncAjax({
            url: ctx + "/area/getAllcity?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function () {
                $(targetDiv).html("");
            },
            success: function (res) {
                if (res["result"] == "0") {
                    if (!isEmpty(res["data"])) {
                        var html = "";
                        $.each(res["data"], function (idx, item) {
                            html += "<a href='javascript:setCity("+item["addressId"]+","+"\""+ item["shortName"]+"\")' value=\"" + item["addressId"] + "\">" + item["shortName"] + "</a>";
                        })
                        $(targetDiv).html(html);
                    } else {
                    }
                } else {
                    bootbox.alert(res["msg"]);
                }
            }
        })
    }
    function setCity(cityId,shortName) {
        $(".city-select a[value=\"" + cityId + "\"]").removeClass("active");
        $(".city-select a[value=\"" + cityId + "\"]").addClass("active");
        if(serachClik){
            $('#fliiterCity').attr('value',cityId);
            $('#fliiterCity').html(shortName);
            searchSub('cityId','city-lable',1);
        }
        else {
            $('#changeCity').attr('value',cityId);
            $('#changeCity').html(shortName);
            city=cityId;
            serachClik=true;
        }

        $("#areaSlectBox").modal("hide");
    }
    function showAreaDialog(el) {
        id =$(el).attr('id');
        if(id!="fliiterCity"){
            serachClik=false;
        }
        $("#areaSlectBox").modal("show");
    }
    function loadInfoList(scope) {
        var data = {city: "default", pagetype: scope};
        asyncAjax({
            url: ctx + "/portal/info/list?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function (req) {
                $("#salepartyinfo-left").html('<i class="fa fa-spin fa-spinner"></i>正在刷新数据...');
            },
            success: function (res) {
                //console.log("res:%o", res);
                $("#salepartyinfo-left").html("");
                if (res["result"] == "0") {
                    if (!isEmpty(res["data"])) {
                        $("#saleinfo-tml").tmpl(res["data"]).appendTo($("#salepartyinfo-left"));
                    }
                    else {
                        $("#salepartyinfo-left").html('<div class="alert alert-warning">该模块尚未配置任何资讯!</div>');
                    }
                } else {
                    bootbox.alert(res.msg);
                }
            }
        })
    }
    function changecheck(obj) {
        var aa = document.getElementsByName("seller");
        for (var i = 0; i < aa.length; i++) {
            aa[i].checked = false;
        }
        obj.checked = true;
    }
    //分页


    /*收藏*/
    function collect(collectid,id) {
        var celflag = document.getElementById(collectid).alt;
        var data={shop_id:id,flag:true}
        if (celflag == 0) {
            asyncAjax({
                url: ctx + "/shop/shopCollect?" + $.param(data).replace(/(%5D|%5B)/g, ""),
                success: function (res) {
                    //console.log("res:%o", res);
                    if (res["result"] == "0") {
                        if (!isEmpty(res["data"])) {
                            console.log("res:%o", res);
                        }
                    } else {
                        bootbox.alert(res.msg);
                    }
                }
            })
            document.getElementById(collectid).src = "${ctx}/resources/portal/img/after_collect.png";
//            document.getElementById(collectid).alt = "1";

        }
        <%--else {--%>
            <%--document.getElementById(collectid).src = "${ctx}/resources/portal/img/before_collect.png";--%>
            <%--document.getElementById(collectid).alt = "0";--%>
        <%--}--%>

    }
</script>
</body>
</html>
